<template>
  <div class="layout" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
    <div class="layout_left_right">
      <el-row :gutter="attrDataConf.colGutter">
        <el-col :span="attrDataConf.left_width || datas.left_width">
          <div class="layout left" slotName="layout_left">
            <slot name="layout_left">layout left</slot>
          </div>
        </el-col>
        <el-col :span="attrDataConf.right_width || datas.right_width">
          <div class="layout right" slotName="layout_right">
            <slot name="layout_right">layout right</slot>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template> <script>
export default {
  name: "layout",
  props: {
    datas: {
      type: Object,
      default() {
        return {
          cmpt_class: [],
          cmpt_style: {},
          attr_data_conf: { left_width: 6, right_width: 18, colGutter: 8 },
          left_width: 6,
          right_width: 18
        };
      }
    }
  },
  data() {
    return { attrDataConf: null };
  },
  created() {
    if (typeof this.datas.attr_data_conf == "string") {
      try {
        this.attrDataConf = new Function(
          `return ${this.datas.attr_data_conf}`
        )();
      } catch (err) {
        this.attrDataConf = JSON.parse(this.datas.attr_data_conf);
      }
    } else {
      this.attrDataConf = this.datas.attr_data_conf;
    }
    if (!this.attrDataConf.colGutter) {
      this.attrDataConf.colGutter = 0;
    }
  }
};
</script> <style lang="less" scoped>
.layout_left_right {
  .left {
    min-height: 50px;
  }
  .right {
    min-height: 50px;
  }
}
</style>